<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 输入框组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">输入框组件示例</h1>
    
    <!-- 基础输入框 -->
    <div class="example-section">
      <h2 class="example-section-title">基础输入框</h2>
      
      <div class="example-form-group">
        <label class="example-label">普通输入框</label>
        <input type="text" class="input" placeholder="请输入内容">
      </div>
      
      <div class="example-form-group">
        <label class="example-label">文本域</label>
        <textarea class="input" placeholder="请输入多行文本" rows="4"></textarea>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">下拉选择</label>
        <select class="input" aria-label="选择选项">
          <option>选项 1</option>
          <option>选项 2</option>
          <option>选项 3</option>
        </select>
      </div>
    </div>
    
    <!-- 输入框尺寸 -->
    <div class="example-section">
      <h2 class="example-section-title">输入框尺寸</h2>
      
      <div class="example-form-group">
        <label class="example-label">大尺寸</label>
        <input type="text" class="input input-large" placeholder="大尺寸输入框">
      </div>
      
      <div class="example-form-group">
        <label class="example-label">默认尺寸</label>
        <input type="text" class="input" placeholder="默认尺寸输入框">
      </div>
      
      <div class="example-form-group">
        <label class="example-label">小尺寸</label>
        <input type="text" class="input input-small" placeholder="小尺寸输入框">
      </div>
    </div>
    
    <!-- 带图标的输入框 -->
    <div class="example-section">
      <h2 class="example-section-title">带图标的输入框</h2>
      
      <div class="example-form-group">
        <label class="example-label">前置图标</label>
        <div class="input-wrapper has-prefix">
          <div class="input-prefix">
            <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
          </div>
          <input type="text" class="input" placeholder="搜索">
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">后置图标</label>
        <div class="input-wrapper">
          <input type="password" class="input" placeholder="请输入密码" value="123456">
          <div class="input-suffix">
            <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 输入框状态 -->
    <div class="example-section">
      <h2 class="example-section-title">输入框状态</h2>
      
      <div class="example-form-group">
        <label class="example-label">正常状态</label>
        <input type="text" class="input" placeholder="正常状态">
      </div>
      
      <div class="example-form-group">
        <label class="example-label">错误状态</label>
        <input type="text" class="input error" placeholder="请输入正确的值" value="错误的值">
        <span class="input-error">请输入正确的格式</span>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">成功状态</label>
        <input type="text" class="input success" placeholder="验证通过" value="正确的值">
        <span class="input-help">验证通过</span>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">禁用状态</label>
        <input type="text" class="input" placeholder="禁用状态" disabled value="禁用内容">
      </div>
    </div>
    
    <!-- 输入框组 -->
    <div class="example-section">
      <h2 class="example-section-title">输入框组</h2>
      
      <div class="input-group">
        <input type="text" class="input" placeholder="用户名">
        <input type="text" class="input" placeholder="域名">
      </div>
    </div>
    
    <!-- 完整表单示例 -->
    <div class="example-section">
      <h2 class="example-section-title">完整表单示例</h2>
      
      <form>
        <div class="example-form-group">
          <label class="example-label">姓名</label>
          <input type="text" class="input" placeholder="请输入姓名" required>
        </div>
        
        <div class="example-form-group">
          <label class="example-label">邮箱</label>
          <div class="input-wrapper has-prefix">
            <div class="input-prefix">
              <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
              </svg>
            </div>
            <input type="email" class="input" placeholder="example@example.com" required>
          </div>
        </div>
        
        <div class="example-form-group">
          <label class="example-label">描述</label>
          <textarea class="input" placeholder="请输入描述" rows="4"></textarea>
          <span class="input-help">可选，最多200字</span>
        </div>
        
        <div class="button-group mt-large">
          <button type="button" class="button button-secondary">取消</button>
          <button type="submit" class="button button-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

